<template>
  <div class="nav-page">
    <template v-if="loading">
      <van-image class="bnr" :src="list.bnr" />
      <van-row
        class="gray-tip"
        type="flex"
        justify="center"
        align="center"
      >Free Shipping Over $39 ->Standard Shipping $5.96</van-row>
      <div class="title text-cen color-black">Category</div>
      <!-- Category -->
      <van-grid direction="horizontal" :column-num="2">
        <van-grid-item icon="photo-o" text="文字" to="/pro-list" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
        <van-grid-item icon="photo-o" text="文字" />
      </van-grid>
    </template>
    <!-- loading -->
    <van-loading type="spinner" v-if="!loading" />
  </div>
</template>
<script>
export default {
  name: "NavPage",
  props: ['id'],
  data() {
    return {
      list: {},
      loading: false,
    }
  },
  created() {
    if (+this.id === 1) {
      this.list = {
        bnr: 'https://color-xu.gitee.io/resource/FrontWeb/images/bnr1.png',
      }
    } else {
      this.list = {
        bnr: 'https://color-xu.gitee.io/resource/FrontWeb/images/bnr2.png',
      }
    }
    setTimeout(() => {
      this.loading = true
    }, 500)
  },
}
</script>
<style lang="scss" scoped>
.nav-page {
  .bnr {
    width: 100%;
    display: block;
  }

  .gray-tip {
    padding: 8px 0;
    background-color: #eee;
  }

  .title {
    padding: 8px 0;
    font-size: 16px;
  }
}
</style>